<template>
    <div>
        <el-card class="mycard" style="width: 100%">
            <div :model="zhuanjiDetail">
                <div style="display: flex; width: 100%; align-items: center; justify-content: space-between;">
                    <img :src="zhuanjiDetail.pic" style="width: 10%;" />
                    <span class="words">专辑名：{{zhuanjiDetail.aname}}</span>
                    <span class="words">唱片公司：{{zhuanjiDetail.company}}</span>
                    <span class="words">语言：{{zhuanjiDetail.lang}}</span>
                    <span class="words">时间：{{zhuanjiDetail.pdate}}</span>
                </div>

            </div>
        </el-card>
        <el-table class="mycard" :data="zhuanjiSong.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%; margin-top: 2%;">
            <el-table-column label="专辑号" prop="aid">
            </el-table-column>
            <el-table-column label="歌曲名" prop="sname">
            </el-table-column>
            <el-table-column label="是否新歌" prop="is_new">
            </el-table-column>
            <el-table-column label="是否收藏" prop="is_hot">
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            zhuanjiDetail: {},
            zhuanjiSong:[],
            search: ''
        }
    },
    async created() {
        const resDetail = await this.$http.get('music/findAlbumBeanbyAlbumid', { params: { aid: this.$route.query.zjnum } });
        const resSong = await this.$http.get('music/findSongBeanbyAlbumid', { params: { aid: this.$route.query.zjnum } });
        this.zhuanjiDetail = resDetail.data.data;
        this.zhuanjiSong = resSong.data.data;
        // console.log(this.zhuanjiDetail);
        // console.log(this.zhuanjiSong);
    },
    methods: {
        handleEdit(index, row) {
            row.isselect = !row.isselect;
            console.log(row);

        },
    },
}
</script>
<style scoped>
.box-card {
    width: 480px;
}
.words {
    font-size:2rem;
    padding-left: 20px;
    color: #ffffff;
    text-shadow: -3px -2px 3px #dbdada, 4px 3px 3px #444444;
  }
/* .text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
} */

.mycard {
    padding-top: 20px;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
  }
</style>